<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{obj}}{{ary}}</h1>
        <button @click='fn'>阿牛</button>
        <span v-show='false'>{{t}}</span>
    </div>
</body>
</html>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            obj:{a:123},
            ary:[1,2,3,4,5],
            // 对于数组来说， 更改项触发视图的更新；只能通过 splice pop push shift unshift sort reverse 这几个变异方法
            t:0
        },
        methods: {
          fn(){
            this.obj.b = 666 // b 是我们新增的一个属性 没有被劫持； 所以直接增加一个b 是不会触发视图更新
            this.obj.c = 666 
            this.obj.d = 666 
            this.obj.r = 666 
            // this.obj.a = 100;// a 是被劫持的属性  当我们改a的时候会触发试图更新；
            this.t = Math.random()// 单纯是为了触发视图的更新
          }
          // fn(){
          //   // this.obj = {...this.obj,b:666};// 直接更改了 obj的地址；obj是被劫持的；所有obj一改 视图就更新
          //   this.obj = Object.assign({b:666},this.obj)
          //   // this.obj = Object.assign(this.obj,{b:666}) // obj的地址没有发生改变
          // }

          // fn(){
          //   console.log(this.$set)// 利用 vue提供的 defineReactive$$1 这个方法 对该目标中的属性进行劫持， defineReactive$$1 本质还是利用了defineReactive这个API
          //   this.$set(this.obj,'b',666)// this.$set(目标，属性名，属性值)
          // }




        },
    });
    /* 
      能触发视图更新的哪些变量 一定是 被劫持的数据
    */
</script>